<!DOCTYPE html>
<html>
    <head>
        <title>{% block title %}{{ global.title }}{% endblock %}</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
        <script>
        var _hmt = _hmt || [];
            (function() {
              var hm = document.createElement("script");
              hm.src = "//hm.baidu.com/hm.js?03b8b88cfe4aedb1a77cb0f91bcbf49f";
              var s = document.getElementsByTagName("script")[0]; 
              s.parentNode.insertBefore(hm, s);
            })();
        </script>


        <style type="text/css">
            body,html{margin:0;padding:0;font-size:16px;height:100%;background-color:#666}
            #content{width:100%;max-width:640px;height:100%;margin:0 auto;position:relative;overflow:hidden}

            @font-face {
                /* font-properties */
                //font-family: DFPHaiBaoW12;
                //src:url('img/DFPHaiBaoW12.ttf')
            }

            .start{height:100%;background:url('{{ imgsrc("img/startBg.jpg") }}') no-repeat top center;background-size:cover}
            .start-btn{width:100%;position:absolute;width:100%;top:auto;bottom:0;cursor:pointer}
            .start-btn img{width:44.68%;height:auto;margin:0 0 0 40%;display:block;}

            .game{width:100%;height:100%;display:none;text-align:center}
            .game canvas{margin:0 auto}

            .game-role{width:42.3%;position:absolute;bottom:5.94%;left:0;left:50%}
            .game-role img{width:100%}

            .rule{position:absolute;top:0;left:0;height:100%;width:100%;background-color:rgba(0,0,0,.5);display:none;z-index:3}
            .rule img:first-child{width:91.8%;height:auto;display:block;margin:0px auto 0;}
            .rule img:last-child{margin:0 auto;display:block;cursor:pointer;width:14.6875%}
            
            .over{position:absolute;top:0;left:0;height:100%;display:none;z-index:100}
            .over img.over-bg{width:100%}
            .over .content{position:absolute;top:0;left:0;z-index:2;width:100%;height:100%;overflow:hidden;-webkit-transform-origin:0 0}
            .over .defen{display:block;width:50%;overflow:hidden;text-align:center;margin:0 auto 0}            
            .over .defen .num{display:block;width:100%;overflow:hidden;height:100px;}
            .over .defen img.chenghao{display:block;font-size:18px;;display:block;margin : 45px auto 0;width:100%}
            .over p{position:absolute;width:100%;bottom:0;left:0;text-align:center}
            .over p a{display:inline-block;width:24%;margin:0 5px}
            .over p a img{display:block;width:100%;}
            .pointer-events{pointer-events:none}

            .source{width:95px;height:57px;position:absolute;right:0;top:8px;pointer-events:none}
            .source-bg{width:80px;height:35px;background-color:black;position:absolute;right:0;top:11px;opacity:0.4}
            .source i{width:30px;height:30px;position:absolute;left:0;top:0;border-radius:50%;background-color:#000000;left:-15px;top:-11px}
            .source i:last-child{top:auto;bottom:-11px}
            .source span{position:absolute;z-index:2;font-size:18px;line-height:62px;text-align:center;color:white;width:80px;right:0}
            .source span:after{content:"分";font-size:14px;display:inline-block;margin-left:2px;position:relative;top:-2px;}
            .source p{font-size:50px;color:white;top:-50%;opacity:1;position:absolute;}

            .blood{width:85px;height:32px;top:19px;background-color:rgba(0,0,0,.4);border-radius:0 5px 5px 0;position:absolute;left:0;pointer-events:none}
            .blood i{display:inline-block;width:21px;height:18px;background:url('{{ imgsrc("img/blood.png") }}') no-repeat;margin:8px 1px 0}
            .blood-one i{background-position:bottom left;height:19px}
            .blood-one i:first-child{background-position:top left;height:18px}
            .blood-two i:last-child{background-position:bottom left;height:19px}
            .blood-zero i{background-position:bottom left;height:19px}

            .loading{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;background:url('{{ imgsrc("img/game/2x/lawn.jpg") }}') no-repeat top center;background-size:cover}
            .loading span{font-size:26px;text-align:center;width:100%;height:100%;line-height:400px;display:block;;color:white;background:url('{{ imgsrc("img/game/2x/tree.png") }}') no-repeat top center;background-size:cover}
            
            .start-btn{top:auto;bottom:8%;}
            .over p{bottom:6%}

            .reload-loading{position:absolute;width:100%;height:100%;z-index:999;background-color:rgba(0,0,0,.3);top:0;left:0;pointer-events:none}
            .reload-loading span{width:100%;text-align:center;top:0;left:0;color:white;font-size:40px;;position:absolute;-webkit-transition:.6s all}
            .overlay { 
                display: none;
                background-color: rgba(3, 3, 3, 0.70);
                position: absolute; top: 0; left: 0;
                width: 100%; height: 100%;  z-index: 100;
            }
            .overlay .share { width: 165px; position:absolute; right: 0; top: 0;}
            #sfx-bgm { display: none; }
           
            @media all and (min-width:360px){
                .start{background-image:url('{{ imgsrc("img/2x/startBg.jpg") }}')}
                .start-btn { bottom: 8%; top: auto; }
            }
            
            @media all and (max-height:480px){
                .start-btn { bottom: 5%; }
                .rule img:first-child { width: 82%; };
                .blood{-webkit-transform: scale(0.7, 0.7);-webkit-transform-origin:0 0}
                .source{-webkit-transform: scale(0.7, 0.7);-webkit-transform-origin:top right}
            }
            
            @media all and (max-height: 420px) {
                .start-btn { bottom: 1%; }
                .rule img:first-child { width: 72%; }
                .over p { bottom: 0; transform: scale(0.8, 0.8);-webkit-transform: scale(0.8, 0.8);-webkit-transform-origin:0 0 }
            }
            
            
            
        </style>
    </head>
    <body>
        <!-- first 200x200 will be shared -->
        <div style="position: absolute; top: -999px; display: none;"><img src="{{ global.wxshare.img }}" /></div>
        <audio id="sfx-bgm" preload="auto" loop="loop">
            <source src='{{ imgsrc("img/bgm.mp3") }}?v=1' type="audio/mpeg">
        </audio>
        <div id="content">
            <div class="start">
                <div class="start-btn"></div>
            </div>
            <div class="game">
                <canvas id="canvas"></canvas>
                <div class="source">
                    <span>0</span>
                    <div class="source-bg"><i></i><i></i></div>
                    <p style="opacity:0">+10</p>
                </div>
                <div class="blood">
                    <i></i><i></i><i></i>
                </div>
                <div class="loading">
                    <span>加载中...</span>
                </div>
            </div>
            <div class="rule">
                <img src='{{ imgsrc("img/2x/rule.png") }}' />
                <img class="rule-close" src='{{ imgsrc("img/2x/rule-close.png") }}' />
            </div>
            <div class="over">
                <img class="over-bg" src='{{ imgsrc("img/2x/over.png") }}' />
                <div class="content">
                    <span class="defen">
                    </span>
                    <p>
                        <a href="http://www.suning.com/webapp/wcs/stores/servlet/SNMWPromotionCouponView?storeId=10052&catalogId=10051&promotionId=3931"><img src='{{ imgsrc("img/2x/btn-link.png") }}' alt="领取苏宁手机购物券" /></a>
                        <a href="{{ urlFor("index") }}" class="replay"><img src='{{ imgsrc("img/2x/btn-again.png") }}' alt="在玩一次" /></a>
                        <a class='btnshare' href="#"><img src='{{ imgsrc("img/2x/btn-share.png") }}' alt="分享到朋友圈" /></a>
                    </p>

                </div>
            </div>
        </div>
        <div class='overlay'>
            <img class='share' src='{{ imgsrc("img/share.png") }}?v=5'>
        </div>
        {{ js('js/lib/easeljs-0.8.0.min.js') }}
        {{ js('js/lib/preloadjs-0.6.0.min.js') }}
        {{ js('js/lib/TweenMax.min.js') }}
        <script src='http://res.wx.qq.com/open/js/jweixin-1.0.0.js'></script>
        <script>
            // screen sized
            var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
            var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
            
            var lineLink = '{{ app.config('base_url')|raw }}' + '/hitdog';
            var imgUrl = '{{ global.wxshare.img }}';
            var shareTitle = '{{ global.wxshare.title }}';
            var shareContent = '恶狗当道就该打';
            var timelineContent = '{{ global.wxshare.content }}';
            var timelinelink = lineLink;
            var rootPath = '{{ imgsrc("img/") }}';
            var bgmPlayed = false;
            
            (function (window) {
                var document = window.document;

                var basePath =  w > 360 ? '{{ imgsrc("img/2x/") }}' : '{{ imgsrc("img/") }}';
                 
                var div = document.createElement('div');

                var $j = function (str, context) {
                    str = str.trim();
                    if (str.charAt(0) == '<' && str.charAt(str.length - 1) == '>') {
                        div.innerHTML = str;
                        return div.firstChild;
                    }
                    if (typeof (context) == 'string') {
                        context = $j(context);
                    }
                    ;
                    return (context || document).querySelector(str)
                };
                var content = $j('#content');
                //修正比率
                var body = document.body;
                if (body.clientHeight <= body.clientWidth) {
                    content.style.width = body.clientHeight * 640 / 1136 + 'px'
                }
                document.body.addEventListener('touchmove',function(e){
                    e.preventDefault();
                },true)
                var startLayer = $j('.start');
                var startBtn = $j('.start-btn');
                var gameLayer = $j('.game');
                var overlay = $j('.overlay');
                var ruleLayer = $j('.rule');
                var btnshare = $j('.btnshare');
                var startBtn = $j('<img src="{basePath}startBtn.png" alt="" />'.replace('{basePath}', basePath));
                $j('.start-btn').appendChild(startBtn);
                startBtn.onclick = function (e) {
                    e.preventDefault();
                    startLayer.style.display = 'none';
                    gameLayer.style.display = 'block';
                    ruleLayer.style.display = 'block';
                    window.App.init();
                };
                btnshare.onclick = function (e) {
                    e.preventDefault();
                    overlay.style.display = 'block';
                    TweenMax.to(overlay, 2, {display: 'none'});
                };
                //startBtn.click();
                ruleLayer.onclick = function (e) {
                    e.preventDefault();
                    ruleLayer.style.display = 'none';
                    App.bind();                   
                };
                // $j('.rule-close', ruleLayer).click();
                //$j('.replay').onclick = function(){
                //    App.replay();
                //}

            })(window);
        </script>
{#        {{ js('js/app/main.js') }}#}        
        {% if signPackage is defined %}
        <script>
            wx.config({
                debug: false,
                appId: '{{ signPackage.appId }}',
                timestamp: {{ signPackage.timestamp }},
                nonceStr: '{{ signPackage.nonceStr }}',
                signature: '{{ signPackage.signature }}',
                jsApiList: [
                    'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'showMenuItems', 'hideMenuItems'
                ]
            });
            wx.ready(function () {
                wx.showMenuItems({
                    menuList: [
                        'menuItem:share:appMessage',
                        'menuItem:share:timeline',
                        'menuItem:share:weiboApp',
                        'menuItem:share:qq'
                    ]
                });
                wx.hideMenuItems({
                    menuList: [
                        'menuItem:share:facebook',
                        'menuItem:openWithSafari',
                        'menuItem:share:email',
                        'menuItem:setFont',
                        'menuItem:copyUrl',
                        'menuItem:exposeArticle'
                    ]
                });
                
                wx.onMenuShareAppMessage({
                    title: shareTitle,
                    desc: shareContent,
                    link: lineLink,
                    imgUrl: imgUrl,
                    success: function () { 
                        // 用户确认分享后执行的回调函数
                    },
                    cancel: function () { 
                        // 用户取消分享后执行的回调函数
                    }
                });
                wx.onMenuShareTimeline({
                    title: timelineContent, // 分享标题
                    link: timelinelink, // 分享链接
                    imgUrl: imgUrl, // 分享图标
                    success: function () { 
                        // 用户确认分享后执行的回调函数
                    },
                    cancel: function () { 
                        // 用户取消分享后执行的回调函数
                    }
                });
                wx.onMenuShareQQ({
                    title: shareTitle,
                    desc: shareContent,
                    link: lineLink,
                    imgUrl: imgUrl,
                    success: function () { 
                        // 用户确认分享后执行的回调函数
                    },
                    cancel: function () { 
                        // 用户取消分享后执行的回调函数
                    }
                });
                wx.onMenuShareWeibo({
                    title: shareTitle,
                    desc: shareContent,
                    link: lineLink,
                    imgUrl: imgUrl,
                    success: function () { 
                        // 用户确认分享后执行的回调函数
                    },
                    cancel: function () { 
                        // 用户取消分享后执行的回调函数
                    }
                });
            });
            {% endif %}
        </script>
        {{ js('js/app/app.js?v=14') }}
    </body>
</html>
